<template>
  <!-- 中间容器每一个item的展示 -->
  <el-form-item 
    :class="[{'is-curr':isCurr},'field-item']" 
    :label="comp.config.title"
    @click.native="state.setCurrComp(comp)" 
    :required="comp.config.required"
   >
    <div class="item-main">
      <!--  style="pointer-events: none" -->
      <component :is="dynaComp" :comp="comp" class="item-view">
      </component>

      <div class="item-del">
        <el-button v-if="isCurr" @click.stop="state.cloneComp(comp.id)" size="mini" icon="el-icon-copy-document" circle/>
        <el-button v-if="isCurr" @click.stop="state.delComp(comp.id)" type="danger" size="mini" icon="el-icon-delete" circle/>
      </div>
    </div>
  </el-form-item>
</template>

<script>

import {fieldMap} from "@/fields/menu";

export default {
  name: "ComponentBox",
  components: {},
  props: ["comp"],
  inject: ["state"],
  data() {
    return {
      dynaComp: fieldMap.get(this.comp.type).design
    };
  },
  computed: {
    isCurr() {
      if (this.currConfig) {
        return this.currConfig.id === this.comp.id
      }
      return false;
    },
    currConfig() {
      return this.state.currConfig();
    }
  },
  methods: {},
  mounted() {

  }
}
</script>,
<style lang="scss" scoped>
.field-item {
  padding: 10px;
  margin-bottom: 0;
  border: 1px dashed transparent;

  &.is-curr {
    border-color: #797979;
    background: #f2f2f2;
  }

  .item-main {
    display: flex;
    justify-content: space-between;

    .item-view {
      flex: 1;
      margin-right: 10px;
    }

    .item-del {
      min-width: 28px;
    }
  }
}
</style>
